import React from 'react';
import { Form, Input, InputNumber, Modal } from 'antd';

export default ({ open, onCancel, onFinish }) => {
  const [form] = Form.useForm();
  const handleSubmit = async () => {
    form.validateFields().then(async values => {
      onFinish(values);
    });
  };

  const handleCancel = ()=>{
    form.resetFields();
    onCancel();
  }

  return (
    <Modal
      style={{ top: '10%' }}
      width={550}
      title="设置日志等级"
      open={open}
      onCancel={handleCancel}
      onOk={handleSubmit}
      okText="保存"
    >
      <Form initialValues={{ days: 14 }} style={{ marginTop: 12 }} form={form}>
        <Form.Item
          label="VIN"
          name="vin"
          rules={[
            {
              required: true,
              message: '请填写VIN',
            },
          ]}
        >
          <Input maxLength={20} placeholder="请输入VIN" />
        </Form.Item>
        <Form.Item label="日志等级">获取debug日志</Form.Item>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 6, lineHeight: '32px' }}>
          <Form.Item
            label="有效期"
            name="days"
            rules={[
              {
                required: true,
                message: '请填写1-30天的有效期!',
                min: 1,
                max: 30,
                pattern: /^([1-9]|[1-2][0-9]|30)$/,
              },
            ]}
          >
            <InputNumber placeholder="请输入有效期" style={{ width: '150px' }} />
          </Form.Item>
          天
        </div>
      </Form>
    </Modal>
  );
};
